<template>
  <el-container  style="min-height: 100vh;">
    <el-aside id="leftmenuF" v-resize="MuneResize" :width="sideWidth+'px'" style="background-color: rgb(238,241,246);min-height: 100vh; box-shadow: 2px 0 6px rgb(0 21 41/ 0.35);position: relative;">
     <UserAside id="leftmenu" :is-collapse="isCollapse" :logo-text-show="logoTextShow" :user-name="userName"/>
     <div id="drap-meuline" style="position: absolute;right: 0;top: 0;"></div>
    </el-aside>

    <el-container>
      <el-header style="border-bottom: 1px solid #ccc">
      <Header :collapse-btn-class="collapseBtnClass" :collapse="collapse" :user-name="userName"/>
      </el-header>
      <el-main>
        <!--当前页面的所有子路由都在这里-->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import UserAside from '@/components/user/UserAside.vue'
import Header from '@/components/admin/Header.vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'UserManage',
  components: { UserAside, Header},
  data () {
    return {
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      collapseBtnClass: 'el-icon-s-fold',
      userName:'',
    }
  },
  created () {
    this.userName=this.$route.params.userName
    console.log('manage 跳转的userName是: '+this.userName)
  },
  directives: {
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let _width = "";
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (_width !== style.width) {
            binding.value({ width: style.width, targetId: el.id });
            _width = style.width;
          }
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
  },
  methods: {
    collapse () { // 点击收缩按钮收缩
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) { // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {
        // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    // 动态获取左侧菜单的宽度
    MuneResize() {
        // console.log(data,'daya')
        // 拿到左侧菜单父元素
        //const leftDom = document.getElementById(`${data.targetId}`);
        // 拿到右侧内容父元素
        //const mainContainer =document.getElementsByClassName("el-container is-vertical")[0];
        // mainContainer.style.marginLeft = leftDom.clientWidth + "px";
    },
  },
  mounted() {
    // 获取dom，对左菜单进行拖拽
    const drapLine = document.getElementById("drap-meuline");
    // 获取右侧内容Dom
    // var mainContainer = document.getElementsByClassName("el-container is-vertical")[0];
    // 获取左侧菜单Dom
    const menuleft = document.getElementById("leftmenu");
    // 获取左侧菜单Dom父元素，为了动态设置宽度
    const sidebarWidth = document.getElementById("leftmenuF");
    drapLine.onmousedown = function (e) {
      // 设置最大/最小宽度
      const max_width = 600;
      const min_width = 210;
      let mouse_x = 0; // 记录鼠标相对left盒子x轴位置
      e.preventDefault(); // 阻止默认事件
      const _e = e || window.event;
      mouse_x = _e.clientX - menuleft.offsetWidth;
      document.onmousemove = function (e_) {
        // console.log(min_width, max_width);
        const _e_ = e_ || window.event;
        let left_width = _e_.clientX - mouse_x;
        left_width = left_width < min_width ? min_width : left_width;
        left_width = left_width > max_width ? max_width : left_width;
        sidebarWidth.style.width = left_width + "px";
        // mainContainer.style.marginLeft = left_width + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
}

</script>
<style>
.headBag{
  background-color: #eee!important;
}
#drap-meuline {
  background: transparent;
  width: 2px;
  height:100%;
  cursor: e-resize;
}
</style>
